<template>
  <div class="info-container">
    <!-- 用户头部信息 -->
    <div class="user-header">
      <div class="user-avatar-info">
        <el-avatar :size="64" :src="avatarUrl" />
        <div class="user-greeting">
          <h2>Hi，{{ userInfo?.name || '用户' }}</h2>
          <p class="greeting-text">管理自己的信息、隐私和安全，让膳养智选为您更好地服务</p>
        </div>
      </div>
    </div>

    <!-- 基本信息标题栏 -->
    <div class="section-header">
      <h3>基本信息</h3>
      <div class="user-basic">
        <div class="basic-item">
          <span class="label">昵称：</span>
          <span class="value">{{ userInfo?.name }}</span>
          <el-button type="text" class="edit-btn" @click="showNicknameDialog = true">
            <el-icon><Edit /></el-icon>
          </el-button>
        </div>
        <el-divider direction="vertical" class="basic-divider" />
        <div class="basic-item">
          <span class="label">账号：</span>
          <span class="value">{{ userInfo?.username }}</span>
          <el-button type="text" class="copy-btn" @click="handleCopy(userInfo?.username)">
            <el-icon><DocumentCopy /></el-icon>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 信息卡片区域 -->
    <div class="cards-container">
      <!-- 基本信息卡片 -->
      <div class="info-card">
        <div class="card-header">
          <h3>基本信息</h3>
          <el-button type="primary" link @click="showBasicInfoDialog = true">
            修改
          </el-button>
        </div>
        <div class="card-content">
          <div class="info-grid">
            <div class="info-item">
              <div class="info-icon">
                <el-icon><User /></el-icon>
              </div>
              <div class="info-content">
                <span class="label">性别</span>
                <span class="value">{{ userInfo?.sex || '--' }}</span>
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <el-icon><Calendar /></el-icon>
              </div>
              <div class="info-content">
                <span class="label">年龄</span>
                <span class="value">{{ userInfo?.age || '--' }} 岁</span>
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <el-icon><LocationInformation /></el-icon>
              </div>
              <div class="info-content">
                <span class="label">身高</span>
                <span class="value">{{ userInfo?.height || '--' }} cm</span>
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <el-icon><Platform /></el-icon>
              </div>
              <div class="info-content">
                <span class="label">体重</span>
                <span class="value">{{ userInfo?.weight || '--' }} kg</span>
              </div>
            </div>
           
          </div>
        </div>
      </div>

      <!-- 右侧卡片 -->
      <div class="info-card">
        <div class="card-header">
          <h3>健康状态</h3>
        </div>
        <div class="card-content health-status-content">
          <template v-if="analyzing">
            <div class="analysis-progress">
              <div class="analysis-icon">
                <el-icon><DataLine /></el-icon>
              </div>
              <h4 class="analysis-title">正在智能分析健康指数</h4>
              <p class="analysis-desc">正在根据您的健康数据进行综合评估...</p>
              <el-progress 
                :percentage="analysisProgress" 
                :show-text="false"
                :stroke-width="4"
                class="health-progress"
              />
            </div>
          </template>
          <template v-else>
            <div class="health-score-display">
              <div class="score-circle">
                <el-progress 
                  type="dashboard" 
                  :percentage="healthScore" 
                  :color="healthColor"
                  :width="180"
                >
                  <template #default="{ percentage }">
                    <div class="score-content">
                      <span class="score-value">{{ percentage }}</span>
                      <span class="score-unit">分</span>
                      <span class="score-label">健康指数</span>
                    </div>
                  </template>
                </el-progress>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 账号安全卡片 -->
    <div class="security-card">
      <div class="card-header">
        <h3>账号安全</h3>
      </div>
      <div class="security-content">
        <div class="security-row">
          <div class="security-item">
            <div class="security-info">
              <span class="security-label">登录密码</span>
              <span class="security-status">已设置</span>
            </div>
            <el-button type="text" class="edit-btn" @click="handlePasswordButtonClick">
              <el-icon><Edit /></el-icon>
            </el-button>
          </div>
          <el-divider direction="vertical" class="security-divider" />
          <div class="security-item">
            <div class="security-info">
              <span class="security-label">账密登录</span>
              <span class="security-status enabled">已开启</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改昵称对话框 -->
    <el-dialog
      v-model="showNicknameDialog"
      title="修改昵称"
      width="30%"
    >
      <el-form :model="nicknameForm" label-width="80px">
        <el-form-item label="新昵称">
          <el-input v-model="nicknameForm.name" placeholder="请输入新昵称" />
          <div class="form-tips">
            <p>· 请勿包含身份证/银行卡等隐私信息</p>
            <p>· 登录名支持英文大小写字符、汉字、数字和横线-、斜杠/、下划线_</p>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showNicknameDialog = false">取消</el-button>
          <el-button type="primary" @click="handleUpdateNickname">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改基本信息对话框 -->
    <el-dialog
      v-model="showBasicInfoDialog"
      title="修改基本信息"
      width="30%"
    >
      <el-form :model="basicInfoForm" label-width="80px">
        <el-form-item label="身高">
          <el-input-number v-model="basicInfoForm.height" :min="0" :max="300" />
          <span class="unit">cm</span>
        </el-form-item>
        <el-form-item label="体重">
          <el-input-number v-model="basicInfoForm.weight" :min="0" :max="500" />
          <span class="unit">kg</span>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="basicInfoForm.age" :min="0" :max="150" />
          <span class="unit">岁</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showBasicInfoDialog = false">取消</el-button>
          <el-button type="primary" @click="handleUpdateBasicInfo">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 安全检测动画对话框 -->
    <el-dialog
      v-model="showSecurityCheck"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="400px"
      class="security-check-dialog"
    >
      <div class="security-check-content">
        <img src="@/assets/koi.svg" alt="logo" class="check-logo">
        <div class="check-icon">
          <el-icon class="rotating"><Loading /></el-icon>
        </div>
        <div class="check-text">
          <p class="account-text">账号：{{ userInfo?.username }}</p>
          <p class="checking-text">正在检测您的安全状态...</p>
        </div>
      </div>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="showPasswordDialog"
      title="修改密码"
      width="30%"
    >
      <el-form :model="passwordForm" label-width="100px">
        <el-form-item label="原密码">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="passwordForm.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showPasswordDialog = false">取消</el-button>
          <el-button type="primary" @click="handleUpdatePassword">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { 
  Edit, 
  DocumentCopy, 
  User, 
  Calendar, 
  LocationInformation,
  Platform,
  DataLine,
  Timer,
  Loading
} from '@element-plus/icons-vue'
import { UserUpdateService, UserScoreService } from '@/api/user'
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const avatarUrl = computed(() => userStore.avatarUrl)

// 对话框显示状态
const showNicknameDialog = ref(false)
const showBasicInfoDialog = ref(false)
const showPasswordDialog = ref(false)
const showSecurityCheck = ref(false)

// 添加进度条相关的响应式变量
const analyzing = ref(false)
const analysisProgress = ref(0)
const progressTimer = ref(null)

// 监听对话框打开，初始化表单数据
watch(showBasicInfoDialog, (newVal) => {
  if (newVal) {
    // 当对话框打开时，用当前用户信息初始化表单
    basicInfoForm.value = {
      height: userInfo.value.height,
      weight: userInfo.value.weight,
      age: userInfo.value.age
    }
  }
})

// 监听昵称对话框打开
watch(showNicknameDialog, (newVal) => {
  if (newVal) {
    nicknameForm.value.name = userInfo.value.name
  }
})

// 表单数据
const nicknameForm = ref({ name: '' })
const basicInfoForm = ref({
  height: '',
  weight: '',
  age: ''
})
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const userUpdateDto = ref({
    id: userInfo.value.id,
    password: null,
    name: null,
    age: null,
    height: null,
    weight: null,
    allergenIds: userInfo.value.allergen?.map(item => item.id) || [],
    diseaseIds: userInfo.value.disease?.map(item => item.id) || [],
    preferenceIds: userInfo.value.preference?.map(item => item.id) || []
})

const score = ref(0)

// 修改获取用户分数的函数
const getUserScore = async () => {
  if(userInfo.value.healthScore){
    score.value = userInfo.value.healthScore
    return
  }
    analyzing.value = true
    analysisProgress.value = 0
    
    // 启动进度条动画
    progressTimer.value = setInterval(() => {
        if (analysisProgress.value < 90) {
            analysisProgress.value += Math.random() * 10
        }
    }, 300)

    try {
        const result = await UserScoreService()
        if (result.code === 200) {
            analysisProgress.value = 100
            userInfo.value.healthScore = result.data
            setTimeout(() => {
                analyzing.value = false
                score.value = result.data
            }, 500)
        }
    } catch (error) {
        console.error('获取健康分数失败:', error)
        analyzing.value = false
    } finally {
        clearInterval(progressTimer.value)
    }
}

// 在组件卸载时清理定时器
onUnmounted(() => {
    if (progressTimer.value) {
        clearInterval(progressTimer.value)
    }
})

// 健康指数计算
const healthScore = computed(() => {
    return score.value || 0
})

// 健康颜色计算 - 使用渐变色数组
const healthColor = computed(() => {
    const score = healthScore.value
    if (score >= 90) {
        return [
            { color: '#67C23A', percentage: 100 },  // 深绿色
            { color: '#85CE61', percentage: 80 }    // 浅绿色
        ]
    }
    if (score >= 75) {
        return [
            { color: '#85CE61', percentage: 100 },  // 浅绿色
            { color: '#95D475', percentage: 80 }    // 更浅的绿色
        ]
    }
    if (score >= 60) {
        return [
            { color: '#E6A23C', percentage: 100 },  // 橙色
            { color: '#EFBD47', percentage: 80 }    // 浅橙色
        ]
    }
    return [
        { color: '#F56C6C', percentage: 100 },      // 红色
        { color: '#FB8989', percentage: 80 }        // 浅红色
    ]
})

// 在组件挂载时获取分数
onMounted(() => {
    getUserScore()
})

// 复制功能
const handleCopy = (text) => {
  navigator.clipboard.writeText(text)
  ElMessage.success('复制成功')
}

// 更新昵称
const handleUpdateNickname = async () => {
  if (!nicknameForm.value.name) {
    ElMessage.warning('请输入新昵称')
    return
  }

  try {
    const result = await UserUpdateService({
      ...userUpdateDto.value,
      name: nicknameForm.value.name
    })
    if (result.code === 200) {
      ElMessage.success('昵称修改成功')
      userStore.setUserInfo({
        ...userInfo.value,
        name: nicknameForm.value.name
      })
      showNicknameDialog.value = false
    }
  } catch (error) {
    ElMessage.error('修改失败')
  }
}

// 计算BMI
const bmi = computed(() => {
        if (userInfo.value?.height && userInfo.value?.weight) {
            const heightInMeters = userInfo.value.height / 100
            return (userInfo.value.weight / (heightInMeters * heightInMeters)).toFixed(2)
        }
        return '--'
    
})
// 更新基本信息
const handleUpdateBasicInfo = async () => {
  try {
    const result = await UserUpdateService({
      ...userUpdateDto.value,
      ...basicInfoForm.value,
    })
    if (result.code === 200) {
      ElMessage.success('信息更新成功')
      userStore.setUserInfo({
        ...userInfo.value,
        ...basicInfoForm.value,
        bmi: bmi,
        healthScore: null
      })
      showBasicInfoDialog.value = false
      getUserScore()
    }
  } catch (error) {
    ElMessage.error('更新失败')
  }
}

// 更新密码
const handleUpdatePassword = async () => {
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }

  try {
    const result = await UserUpdateService({
      ...userUpdateDto.value,
      password: passwordForm.value.newPassword,
      oldPassword: passwordForm.value.oldPassword
    })
    if (result.code === 200) {
      ElMessage.success('密码修改成功')
      showPasswordDialog.value = false
      passwordForm.value = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  } catch (error) {
    
  }
}

// 添加日期格式化函数
const formatDate = (timestamp) => {
  if (!timestamp) return '--'
  const date = new Date(timestamp)
  return date.toLocaleDateString()
}

// 修改处理密码修改的点击事件
const handleSecurityCheck = async () => {
  showSecurityCheck.value = true
  
  // 延迟 2 秒后显示密码修改对话框
  setTimeout(() => {
    showSecurityCheck.value = false
    showPasswordDialog.value = true
  }, 2000)
}

// 修改原有的按钮点击事件处理器
const handlePasswordButtonClick = () => {
  handleSecurityCheck()
}

// 在 script setup 部分添加以下计算属性
const getHealthStatus = computed(() => {
  const score = healthScore.value
  if (score >= 90) return '非常健康'
  if (score >= 75) return '健康'
  if (score >= 60) return '亚健康'
  return '需要关注'
})

const getHealthTextColor = computed(() => {
  const score = healthScore.value
  if (score >= 90) return '#67C23A'
  if (score >= 75) return '#409EFF'
  if (score >= 60) return '#E6A23C'
  return '#F56C6C'
})

const getCurrentTime = computed(() => {
  const now = new Date()
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
})
</script>

<style scoped>
.info-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.user-header {
  margin-bottom: 24px;
}

.user-avatar-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-greeting h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.greeting-text {
  margin: 8px 0 0;
  color: #909399;
  font-size: 14px;
}

.section-header {
  margin-bottom: 24px;
}

.user-basic {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.basic-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 40px;
}

.basic-divider {
  height: 20px;
  margin: 0;
}

.cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.info-card, .security-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.card-content {
  padding: 20px;
}

.info-item {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.label {
  color: #909399;
  width: 60px;
}

.value {
  color: #303133;
}

.security-card {
  grid-column: 1 / -1;
}

.security-content {
  padding: 20px;
}

.security-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 40px;
}

.security-divider {
  height: 20px;
  margin: 0;
}

.security-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.security-label {
  font-size: 14px;
  color: #303133;
}

.security-status {
  font-size: 14px;
  color: #909399;
}

.security-status.enabled {
  color: #67C23A;
}

.edit-btn, .copy-btn {
  padding: 2px;
}

.health-status {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.progress-label {
  display: block;
  font-size: 14px;
  color: #909399;
}

.percentage {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-top: 8px;
}

.unit {
  margin-left: 8px;
  color: #909399;
}

/* 对话框样式 */
:deep(.el-dialog__body) {
  padding: 30px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background-color: #f0f2f5;
  transform: translateY(-2px);
}

.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #e6f0ff;
  border-radius: 8px;
  color: #409EFF;
}

.info-icon .el-icon {
  font-size: 20px;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-content .label {
  font-size: 13px;
  color: #909399;
  width: auto;
}

.info-content .value {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

/* 为不同类型的信息设置不同的图标颜色 */
.info-item:nth-child(1) .info-icon {
  background-color: #e6f0ff;
  color: #409EFF;
}

.info-item:nth-child(2) .info-icon {
  background-color: #e6fff0;
  color: #67C23A;
}

.info-item:nth-child(3) .info-icon {
  background-color: #fff0e6;
  color: #FF8C00;
}

.info-item:nth-child(4) .info-icon {
  background-color: #ffe6e6;
  color: #F56C6C;
}

.info-item:nth-child(5) .info-icon {
  background-color: #e6e6ff;
  color: #6666FF;
}

.info-item:nth-child(6) .info-icon {
  background-color: #f0e6ff;
  color: #9966FF;
}

.form-tips {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
}

.form-tips p {
  margin: 0;
}

/* 安全检测对话框样式 */
.security-check-dialog :deep(.el-dialog__header) {
  display: none;
}

.security-check-dialog :deep(.el-dialog__body) {
  padding: 30px;
}

.security-check-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
}

.check-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
  animation: fadeIn 0.5s ease-in-out;
}

.check-icon {
  font-size: 40px;
  color: #409EFF;
}

.rotating {
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.check-text {
  text-align: center;
}

.account-text {
  margin: 0;
  color: #303133;
  font-size: 16px;
  margin-bottom: 8px;
}

.checking-text {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

/* 添加淡入淡出效果 */
.security-check-dialog :deep(.el-dialog) {
  transition: all 0.3s ease-in-out;
}

.security-check-dialog :deep(.el-dialog__body) {
  opacity: 0;
  animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.health-level {
    display: block;
    font-size: 14px;
    color: #606266;
    margin-top: 4px;
}

.analysis-progress {
    text-align: center;
    padding: 20px;
}

.progress-text {
    font-size: 16px;
    color: #606266;
    margin-bottom: 15px;
}

.health-progress {
    width: 80%;
    margin: 0 auto;
}

.health-progress :deep(.el-progress-bar__outer) {
    border-radius: 4px;
    background-color: #e6f0ff;
}

.health-progress :deep(.el-progress-bar__inner) {
    border-radius: 4px;
    background: linear-gradient(90deg, #409EFF, #64B5F6);
    transition: width 0.3s ease;
}

.health-status-content {
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.analysis-progress {
  width: 100%;
  max-width: 320px;
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(145deg, #ffffff, #f5f7fa);
  border-radius: 20px;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.05),
    0 8px 32px rgba(64, 158, 255, 0.1);
}

.analysis-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #409EFF, #64B5F6);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 30px;
  animation: pulse 2s infinite;
}

.analysis-title {
  font-size: 18px;
  color: #303133;
  margin: 0 0 8px;
  font-weight: 600;
}

.analysis-desc {
  font-size: 14px;
  color: #909399;
  margin: 0 0 30px;
}

.health-progress {
  position: relative;
}

.health-progress :deep(.el-progress-bar__outer) {
  background-color: rgba(64, 158, 255, 0.1);
  border-radius: 2px;
}

.health-progress :deep(.el-progress-bar__inner) {
  background: linear-gradient(90deg, #409EFF, #64B5F6);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.health-progress :deep(.el-progress-bar__inner)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
}

.health-score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 20px;
}

.score-circle {
  position: relative;
}

.score-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.score-value {
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(135deg, #409EFF, #64B5F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.score-unit {
  font-size: 16px;
  color: #909399;
}

.score-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.score-details {
  display: flex;
  gap: 40px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.detail-label {
  font-size: 14px;
  color: #909399;
}

.detail-value {
  font-size: 16px;
  font-weight: 500;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(64, 158, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
</style>

